<template>
	<view>
		<view class="top_bg_img">
			<image src="http://qiniu.suboshimuying.cn/static/merchant/mineBg.png" mode=""></image>
		</view>
		<view class="main">
			<u-navbar leftText=" " title="个人中心" :safeAreaInsetTop="true" :placeholder="true" bgColor="transparent">
				<view class="u-nav-slot" slot="left">
				</view>
			</u-navbar>
			<!-- 顶部信息 -->
			<view class="top_info_box flexC">
				<image :src="userInfo.avatar" mode="" class="avatar"></image>
				<view class="info_name">{{userInfo.nickname}}</view>
				<view class="info_edit flexA" @click="toedit">
					<image src="http://qiniu.suboshimuying.cn/static/merchant/ic_edit.png" class="edit" mode=""></image>
					<view class="">编辑</view>
				</view>
			</view>
			<!-- 累计跟项目 -->
			<view class="option_box flexJ">
				<view class="left_option leftGradient">
					<view class="option_cont">
						<view class="option_num">{{userInfo.order_num}}</view>
						<view class="option_names">累计接单</view>
					</view>
					<image src="http://qiniu.suboshimuying.cn/static/merchant/mask01.png" mode="" class="option_img">
					</image>
				</view>
				<view class="left_option rightGradient" @click="tomyProj">
					<view class="option_cont">
						<view class="option_num">{{userInfo.project_num}}</view>
						<view class="option_names">我的项目</view>
					</view>
					<image src="http://qiniu.suboshimuying.cn/static/merchant/mask02.png" mode="" class="option_img">
					</image>
				</view>
			</view>
			<!-- 我的客服 -->
			<view class="myservice flexJ" @click="kefuClick">
				<view class="left_box flexA">
					<image src="http://qiniu.suboshimuying.cn/static/user/fuke.png" mode=""></image>
					<view class="">我的客服</view>
				</view>
				<image src="http://qiniu.suboshimuying.cn/static/user/ic-arrow@2x.png" mode=""></image>
			</view>
			<!-- 退出商家账号 -->
			<view class="quit" @click="outUser">退出商家账号</view>
			<view class="" style="height: 100rpx;">
			</view>

		</view>
		<BtnTabbar :value="2"></BtnTabbar>
	</view>
</template>

<script>
	import BtnTabbar from "@/components/BtnTabbar/BtnTabbar.vue"
	export default {
		components: {
			BtnTabbar
		},
		data() {
			return {
				userInfo: {},
			};
		},
		onLoad() {
			uni.hideTabBar()
		},
		onShow() {
			this.getMerchInfo()
		},
		methods: {
			//去编辑
			toedit() {
				uni.navigateTo({
					url: `/subPages/merchant/editInfo`
				})
			},
			//我的项目
			tomyProj() {
				uni.navigateTo({
					url: '/subPages/merchant/myProject'
				})
			},
			//退出登陆
			outUser() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 客服点击
			async kefuClick() {
				let res = await this.$api.mykefu()
				uni.makePhoneCall({
					phoneNumber: res.data
				});
			},
			//商家信息
			async getMerchInfo() {
				let res = await this.$api.getMerchInfo()
				this.userInfo = res.data
				// console.log(res);
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.top_bg_img {
		position: relative;
		top: 0;

		image {
			width: 750rpx;
			height: 404rpx;
			opacity: 1;
		}
	}

	.main {
		position: absolute;
		top: 0;
	}

	.top_info_box {
		flex-direction: column;
		width: 750rpx;
		margin: 140rpx auto 88rpx;

		.avatar {
			width: 140rpx;
			height: 140rpx;
			opacity: 1;
			border: 4rpx solid rgba(255, 255, 255, 1);
			border-radius: 50%;
			margin-bottom: 20rpx;
		}

		.info_name {
			color: rgba(0, 0, 0, 0.8);
			font-size: 32rpx;
			font-weight: 700;
			margin-bottom: 20rpx;
		}

		.info_edit {
			color: rgba(128, 110, 254, 1);
			font-size: 24rpx;

			.edit {
				width: 32rpx;
				height: 32rpx;
				opacity: 1;
				margin-right: 8rpx;
			}
		}
	}

	.leftGradient {
		background: linear-gradient(143.8deg, rgba(242, 240, 255, 1) 0%, rgba(221, 216, 255, 1) 100%);
		color: rgba(128, 110, 254, 1);
	}

	.rightGradient {
		background: linear-gradient(143.8deg, rgba(255, 249, 250, 1) 0%, rgba(255, 221, 228, 1) 100%);
		color: #FF869D;
		background-color: #FF869D;
	}

	.option_box {
		width: 686rpx;
		margin: 0 auto;

		.left_option {
			width: 334rpx;
			height: 170rpx;
			border-radius: 12rpx;
			opacity: 1;
			position: relative;

			.option_cont {
				padding: 40rpx 24rpx;
				box-sizing: border-box;

				.option_num {
					width: 198rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					font-size: 46rpx;
					font-weight: 700;
				}

				.option_names {
					font-size: 24rpx;
				}
			}

			.option_img {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 334rpx;
				height: 170rpx;
				opacity: 1;
			}
		}
	}

	.myservice {
		margin: 0 auto;
		margin-top: 18rpx;
		padding: 24rpx 32rpx;
		box-sizing: border-box;
		width: 686rpx;
		height: 80rpx;
		border-radius: 24rpx;
		opacity: 1;
		background: rgba(248, 249, 254, 1);

		image {
			width: 24rpx;
			height: 24rpx;
		}

		.left_box {
			image {
				width: 32rpx;
				height: 32rpx;
				opacity: 1;
				margin-right: 12rpx;
			}

			view {
				color: rgba(128, 110, 254, 1);
				font-size: 26rpx;
			}
		}
	}

	.quit {
		margin: 300rpx auto 0;
		width: 326rpx;
		height: 72rpx;
		border-radius: 600rpx;
		opacity: 1;
		box-sizing: border-box;
		padding: 14rpx 77rpx;
		color: rgba(128, 110, 254, 1);
		font-size: 28rpx;
		border: 1rpx solid #806EFE;
	}
</style>
